<script setup lang='ts'>
// 定义props接收数据
import type { CategoryItem } from '@/types/home'

defineProps<{
  list: CategoryItem[]
}>()
</script>

<template>
  <view class='category'>
    <navigator
      v-for='item in list'
      class='category-item'
      hover-class='none'
      :url='`/pages/dept/dept?deptId=${item.deptId}&deptName=${item.deptName}`'
      :key='item.deptId'
    >
      <image class='icon' :src='item.icon'></image>
      <text class='text'>{{ item.deptName }}</text>

    </navigator>
  </view>
</template>

<style lang='scss'>
/* 前台类目 */
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  min-height: 328rpx;
  background: #FFFFFF;

  .category-item {
    width: 160rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 60rpx;
      height: 60rpx;
    }

    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>
